<clr-datagrid [clrDgLoading]="loading">
    <clr-dg-column>{{"APP_TYPE"|translate}}</clr-dg-column>
    <clr-dg-column>{{"APP_START_TIME"|translate}}</clr-dg-column>
    <clr-dg-column>{{"APP_END_TIME"|translate}}</clr-dg-column>
    <clr-dg-column>{{"APP_STATUS"|translate}}</clr-dg-column>
    <clr-dg-column>{{"APP_CREATED_DATE"|translate}}</clr-dg-column>

    <clr-dg-row *clrDgItems="let item of items" [clrDgItem]="item">
        <clr-dg-cell>{{item.type | translate}}</clr-dg-cell>
        <clr-dg-cell>{{item.startTime|date:'yyyy-MM-dd HH:mm:ss'}}</clr-dg-cell>
        <clr-dg-cell>
            <span *ngIf="item.status ==='FAILED'||item.status ==='SUCCESS'">
                {{item.endTime|date:'yyyy-MM-dd HH:mm:ss'}}
            </span>
        </clr-dg-cell>
        <clr-dg-cell>
            <span *ngIf="item.status==='FAILED'">
                <a href="javascript: void(0)" (click)="onDetail(item)">
                    {{item.status}}
                </a>
            </span>
            <span *ngIf="item.status!=='FAILED'">
                {{item.status}}
            </span>
        </clr-dg-cell>
        <clr-dg-cell>{{item.createdAt|date:'yyyy-MM-dd HH:mm:ss'}}</clr-dg-cell>
    </clr-dg-row>
</clr-datagrid>

<clr-modal [(clrModalOpen)]="opened" [clrModalSize]="'lg'" clrModalClosable="true">
    <h3 class="modal-title">{{"APP_EVENT_DETAIL"|translate}}</h3>
    <div class="modal-body">
        <p>{{detailItem.message}}</p>
    </div>
</clr-modal>

